<?php
	require("./conn.php");
?>
<!DOCTYPE html>
<html>
	<head>
		<title>炫酷网站</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/general.css" type="text/css"/>
		<link rel="stylesheet" href="global.css" type="text/css" media="all" />
		<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />
		<link rel="stylesheet" href="css/animation.css" type="text/css" media="all" />
		<link href="css/style.css" rel="stylesheet" type="text/css">
		<style type="text/css">
			#animate{
				position:absolute;
				top:20%;
				left:45%;
				width:400px;
				height:100px;
				margin:-50px 0 0 -140px;
				border-radius:5px;
				line-height:100px;
				text-align:center;
				color:#000000;
				background:#99FFFF;
				font-size:25px;
			}
			#animate1{
				position:absolute;
				top:20%;
				left:45%;
				width:400px;
				height:100px;
				margin:-50px 0 0 -140px;
				border-radius:5px;
				line-height:100px;
				text-align:center;
				color:#000000;
				background:#FF0000;
				font-size:25px;
			}
			#animate2{
				position:absolute;
				top:20%;
				left:45%;
				width:400px;
				height:100px;
				margin:-50px 0 0 -140px;
				border-radius:5px;
				line-height:100px;
				text-align:center;
				color:#000000;
				background:#66FF33;
				font-size:25px;
			}
		.news{
			height:400px;
			width:350px;
			background-color:white;
			position:absolute;
			top:20%;
			left:35%;
		}
		.background{
			width:100%;
			height:100%;
			position:fixed;
			top:0px;
			left:0px;
			background-color:black;
			opacity: 0.75;
		}
		.news-contect{
			height:250px;
			width:300px;
			margin:0 auto;
			border:1px solid rgb(223,223,223);
		}
		.rewrite{
			margin:0px;
		}
		.btn {
			display: inline-block;
			*display: inline;
			padding: 4px 12px;
			margin-bottom: 0;
			*margin-left: .3em;
			font-size: 14px;
			line-height: 20px;
		}
		.btn-success {
			color: #fff;
			background-color: #5cb85c;
			border-color: #4cae4c;
		}
		.btn-default {
			color: #333;
			background-color: #fff;
			border-color: #ccc;
		}
		.btn-info {
			color: #fff;
			background-color: #5bc0de;
			border-color: #46b8da;
		}
		.btn-sm {
			padding: 5px 10px;
			font-size: 12px;
			line-height: 1.5;
			border-radius: 3px;
		}
		.top{
			margin-top:10px;
		}
		.dropzone {
			border: 1px solid rgba(0,0,0,0.03);
			min-height: 150px;
			width: 150px;
			-webkit-border-radius: 3px;
			border-radius: 3px;
			background: rgba(0,0,0,0.03);
			padding: 23px;
			margin-left:10px;
		}
		.dropzone .dz-preview, .dropzone-previews .dz-preview {
			background: rgba(255,255,255,0.8);
			position: relative;
			display: inline-block;
			margin: 0px;
			width: 150px;
			height:150px;
			vertical-align: top;
			border: 1px solid #acacac;

		}
		</style>
		<script src="js/jquery.js" type="text/javascript"></script>
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript" src="jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="sexylightbox.v2.3.jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="js/jquery.cookie.js"></script>
		<script type="text/javascript" src="js/jquery.get.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<SCRIPT src='js/dropzone.js'></SCRIPT>
		<script type="text/javascript">
		$(document).ready(function(){
			$(".main").animate({top:'365px'},1000);
			$(".ball").animate({top:'295px'},1000);
			$("#rel1").css("background-color","rgb(205,245,254)");
			SexyLightbox.initialize({color:'black', dir: 'sexyimages'});
			var test = $.query.get('contect');
			if($.cookie('status') == 'login'){
				$('#animate').show().text(test);
				 setTimeout(function(){
					$('#animate').fadeOut(1000);
					$.cookie('status', null);
				},2000)
			}
			else if($.cookie('status') == 'no'){
				$('#animate1').show().text(test);
				 setTimeout(function(){
					$('#animate1').fadeOut(1000);
					$.cookie('status', null);
				},2000)
			}
			else if($.cookie('status') == 'logout'){
				$('#animate2').show().text(test);
				 setTimeout(function(){
					$('#animate2').fadeOut(1000);
					$.cookie('status', null);
				},2000)
			}
			if($.cookie('username')){
				$('#message1').hide();
				$('#message2').show();
				$('#news').show();
				$('#dropzone').show();
			}
		});
		</script>
		<link href="css/style.css" rel="stylesheet" type="text/css">
	</head>
	
	<body>
		<div id="animate" class="a-fadein" style="display:none;"></div>
		<div id="animate1" class="a-shake" style="display:none;"></div>
		<div id="animate2" class="a-flipinX" style="display:none;"></div>
		<div class="main">
			<a href="#"><div class="demo1 left"><h2 style="text-align:center;color:white">简介</h2></div></a>
			<a href="#"><div class="demo2 left"><h2 style="text-align:center;color:white">新闻</h2></div></a>
			<a href="#"><div class="demo left"></div>
			<a href="#"><div class="demo3 left"><h2 style="text-align:center;color:white">图片浏览</h2></div></a>
			<a href="#"><div class="demo4 left"><h2 style="text-align:center;color:white">登录/注册</h2></div></a>
		</div>
		<a href="#"><div class="ball example1"><h2 style="margin-top:70px;font-size:50px;text-align:center;color:white">首页</h2></div></a>
		<div class="main1 accept">
			<div class="contect-left"></div>
			<div class="contect-right">
				<h2 style="font-size:35px;color:white">简介</h2>
				<p style="color:white;">诞生于科幻小说之中一样，人们对机器人充满了幻想。也许正是由于机器人定义的模糊，才给了人们充分的想象和创造空间。
中国的机器人专家从应用环境出发，将机器人分为两大类，即工业机器人和特种机器人。所谓工业机器人就是面向工业领域的多关节机械手或多自由度机器人。而特种机器人则是除工业机器人之外的、用于非制造业并服务于人类的各种先进机器人，包括：服务机器人、水下机器人、娱乐机器人、军用机器人、农业机器人、机器人化机器等。在特种机器人中，有些分支发展很快，有独立成体系的趋势，如服务机器人、水下机器人、军用机器人、微操作机器人等。国际上的机器人学者，从应用环境出发将机器人也分为两类：制造环境下的工业机器人和非制造环境下的服务与仿人型机器人，这和中国的分类是一致的。
空中机器人又叫无人机器，在军用机器人家族中，无人机是科研活动最活跃、技术进步最大、研究及采购经费投入最多、实战经验最丰富的领域。80多年来，世界无人机的发展基本上是以美国为主线向前推进的，无论从技术水平还是无人机的种类和数量来看，美国均居世界之首位。</p>
			</div>
			<img src="images/1.png" class="ctr-top">
			<img src="images/2.png" class="ctr-right1">
			<img src="images/4.png" class="ctr-right2" style="height:340px;">
			<img src="images/3.png" class="ctr-right3">
		</div>
		<?php
			$sql = "select * from app_contect order by id desc";
			$result = mysql_query($sql);
			$num = mysql_num_rows($result);
			while($data = mysql_fetch_array($result)){
				$arr[] = $data;
			}
		?>
		<div class="main2 accept">
			<div class="contect-left2">
				<a href="#"><div class="box" id="rel1" rel="1">
					<p style="margin-left:20px;color:black;" class="margin"><?php echo $arr[0]['title']; ?></p>
					<p style="margin-left:20px;color:gray;" class="margin"><?php echo $arr[0]['create_time']; ?></p>
					<p style="margin-left:20px;color:white;" class="margin"><?php echo $arr[0]['contect']; ?></p>
				</div></a>
				<?php
				for($i=1;$i<$num;$i++){
					$a = $i + 1;
					$name1 = "rel"."$a";
					echo "
						<a href=\"#\"><div class=\"box next\" id=\"{$name1}\" rel=\"{$a}\">
							<p style=\"margin-left:20px;color:black;\" class=\"margin\">{$arr[$i]['title']}</p>
							<p style=\"margin-left:20px;color:gray;\" class=\"margin\">{$arr[$i]['create_time']}</p>
							<p style=\"margin-left:20px;color:white;\" class=\"margin\">{$arr[$i]['contect']}</p>
						</div></a>
						";
					}
				?>
				<button type="button" class="btn btn-info btn-sm" style="margin-left:10px;display:none;" id="news">发布新闻</button>
			</div>
			<div class="contect-right2" id="contect1">
				<h2 style="font-size:35px;color:white"><?php echo $arr[0]['title']; ?></h2>
				<p style="color:gray;"><?php echo $arr[0]['create_time']; ?></p>
				<p style="color:gray;"><?php echo $arr[0]['contect']; ?></p>
			</div>
			<?php
				for($i=1;$i<$num;$i++){
					$a = $i + 1;
					$name2 = "contect"."$a";
					echo "
						<div class=\"contect-right2\" style=\"display:none\" id=\"{$name2}\">
							<h2 style=\"font-size:35px;color:white\">{$arr[$i]['title']}</h2>
							<p style=\"color:gray;\">{$arr[$i]['create_time']}</p>
							<p style=\"color:gray;\">{$arr[$i]['contect']}</p>
						</div>
					";
				}
			?>
			<img src="images/1.png" class="ctr-top">
			<img src="images/2.png" class="ctr-right1">
			<img src="images/4.png" class="ctr-right2" style="height:340px;">
			<img src="images/3.png" class="ctr-right3">
		</div>
		<div class="main3 accept">
			<h2 style="font-size:35px;color:white">图片展示</h2>
				<?php
					$sql1 = "select * from app_image";
					$result1 = mysql_query($sql1);
					while($contect = mysql_fetch_array($result1)){
						echo "
							<div class=\"img_container left margin-left\"style=\"margin-top:10px\">
								<a href=\"upload/{$contect['url']}\" rel=\"sexylightbox\" title=\"Puente de la Mujer - Buenos Aires - Argentina\">
								  <img src=\"upload/{$contect['url']}\" alt=\"\" style=\"height:100px;width:150px;\"/>
								</a>
							</div>
						";
					}
				?>
			<form id="dropzone" action="./upload.php" class="dropzone left" style="display:none;">
				<div class="dz-default dz-message" id="images1">
					<h2>点击此处或将图片拖拽至此处以上传</h2>
				</div>
			</form>
			<img src="images/1.png" class="ctr-top">
		</div>
		<div class="main4 accept">
			<div class="contect-left4"></div>
			<div class="contect-right4" id="message1">
				<a href="#"><div class="btn1 left"><h2 class="margin" style="text-align:center;color:white">登录</h2></div></a>
				<a href="#"><div class="btn2 left"><h2 class="margin" style="text-align:center;color:white">注册</h2></div></a>
				<div class="login">
					<p style="color:white;">尊敬的用户，请您登录</p>
					<form action="login.php" method="post">
						<input type="text" name="username1" placeholder="用户名">
						<input type="password" style="margin-top:10px;" name="password1" placeholder="密码">
						<button class="btn-login" type="submit" style="border:0px;margin-top:10px">登录</button>
					</form>
				</div>

				<div class="reg" style="display:none">
					<p style="color:white;">请填写下面的信息加入我们</p>
					<form action="reg.php" method="post">
						<input type="text" name="username2" placeholder="请输入用户名">
						<input type="password" style="margin-top:10px;" name="password2" placeholder="请输入密码">
						<input type="password" style="margin-top:10px;" name="repassword2" placeholder="请再次输入密码">
						<input type="text" style="margin-top:10px;" name="email" placeholder="请输入邮箱">
						<input type="text" style="margin-top:10px;" name="realname" placeholder="请输入真实姓名">
						<button class="btn-login" type="submit" style="border:0px;margin-top:10px">注册</button>
					</form>
				</div>
			</div>
			<div class="contect-right4" style="display:none;" id="message2">
				<a href="logout.php"><div class="btn1 left" style="margin-left:320px;"><h2 class="margin" style="text-align:center;color:white;">退出</h2></div></a>
				<div class="login">
					<h2 style="color:white;">尊敬的用户，您好</h2>
					<p style="color:white;">该网站由中加四班王岚烨制作，学号20126098，网站的文字等内容均来自互联网，如有雷同纯属巧合，该网站使用sexylightbox来实现上传，上传功能使用jquery插件，支持拖拽上传，后台部分采用原生php,css样式基本为个人编写，弹窗部分有借鉴网上提供的开源样式</p>
				</div>
			</div>
			<img src="images/1.png" class="ctr-top">
			<img src="images/2.png" class="ctr-right1">
			<img src="images/4.png" class="ctr-right2" style="height:340px;">
			<img src="images/3.png" class="ctr-right3">
		</div>
		<div class="background" id="status1" style="display:none;"></div>
			<div class="news" id="status2" style="display:none;">
				<h2 style="padding-top:10px;padding-left:10px;font-size:25px;">新闻发布</h2>
				<div class="news-contect">
					<form class="rewrite" action="news.php" method="post">
						<input type="text" name="title" style="height:30px;width:100%;" placeholder="新闻标题"/>
						<textarea name="contect" style="height:200px;width:98%;margin-top:20px;" placeholder="请输出要发布的新闻内容"></textarea>
						<button type="button" id="cancel" class="btn btn-default rewrite top" style="float:left;">取消</button>
						<button type="submit" class="btn btn-success rewrite top" style="float:left;margin-left:188px;">发布</button>
					</form>
				</div>
			</div>
	</body>
	<script type="text/javascript">
		$('.btn1').click(function(){
			$('.reg').hide();
			$('.login').fadeIn(2000);
		});
		$('.btn2').click(function(){
			$('.login').hide();
			$('.reg').fadeIn(2000);
		});
		$('.box').click(function(){
			var a = $(this).attr("rel");
			$('.box').removeAttr("style");
			$("#rel"+a).css("background-color","rgb(205,245,254)");
			$('.contect-right2').hide();
			$("#contect"+a).fadeIn(1500);
		});
		$('.demo1').click(function(){
			//alert('1');
			$(".main").animate({top:'-80px'},1400);
			$(".ball").animate({top:'20px'},1400);
			$(".main1").animate({top:'220px'},1400);
			$(".ball").css("background","-webkit-gradient(linear,center top,center bottom,from(rgb(250,130,30)), to(rgb(230,40,0)))");
		});
		$('.demo2').click(function(){
			//alert('1');
			$(".main").animate({top:'-80px'},1400);
			$(".ball").animate({top:'20px'},1400);
			$(".main2").animate({top:'220px'},1400);
			$(".ball").css("background","-webkit-gradient(linear,center top,center bottom,from(rgb(20,170,201)), to(rgb(0,81,172)))");
		});
		$('.demo3').click(function(){
			//alert('1');
			$(".main").animate({top:'-80px'},1400);
			$(".ball").animate({top:'20px'},1400);
			$(".main3").animate({top:'220px'},1400);
			$(".ball").css("background","-webkit-gradient(linear,center top,center bottom,from(rgb(84,214,29)), to(rgb(64,125,0)))");
		});
		$('.demo4').click(function(){
			//alert('1');
			$(".main").animate({top:'-80px'},1400);
			$(".ball").animate({top:'20px'},1400);
			$(".main4").animate({top:'220px'},1400);
			$(".ball").css("background","-webkit-gradient(linear,center top,center bottom,from(rgb(207,247,29)), to(rgb(188,160,0)))");
		});
		$('.ball').click(function(){
			//alert('1');
			$(".main").animate({top:'365px'},1000);
			$(".ball").animate({top:'295px'},1000);
			$(".accept").animate({top:'-800px'},600);
			$(".ball").css("background","-webkit-radial-gradient(top left, ellipse, rgb(60,79,88), rgb(31,41,47), rgb(13,17,22))");
		});
		$('.ctr-top').click(function(){
			//alert('1');
			$(".main").animate({top:'365px'},1000);
			$(".ball").animate({top:'295px'},1000);
			$(".accept").animate({top:'-800px'},600);
			$(".ball").css("background","-webkit-radial-gradient(top left, ellipse, rgb(60,79,88), rgb(31,41,47), rgb(13,17,22))");
		});
		$('#news').click(function(){
			$('#status1').fadeIn(1000);
			$('#status2').fadeIn(1000);
		});
		$('#cancel').click(function(){
			$('#status1').fadeOut(1000);
			$('#status2').fadeOut(1000);
		});
		$(".dropz").dropzone({
		  url: "/upload.php",
		  maxFiles: 10,
		  maxFilesize: 2,
		  acceptedFiles: ".jpg,.jpeg,.png,.gif",
		  init: function() {
			this.on("sending", function(){
			  //每个上传之前执行
			});
			this.on("complete", function() {
			  //每个上传结束后执行
			});
			this.on("success", function(file,data) {
			});
		  }
	});
	Dropzone.options.myDrop = {
		init: function(){
			this.on("complete", function() {
				if (this.getQueuedFiles().length == 0 && this.getUploadingFiles().length == 0) {
				// File finished uploading, and there aren't any left in the queue.
				}
			});
		}
	};
	
	</script>
</html>